<template>
  <swiper
    :modules="modules"
    navigation
    :pagination="{ clickable: true }"
  >
    <swiper-slide v-for="item in list" :key="item.bannerid">
      <el-image
        :src="item.img"
        :preview-src-list="[item.img]"
        fit="cover"
      />
    </swiper-slide>
  </swiper>
</template>
<script>
import { Navigation, Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

export default {
  name: 'AppBannerSwiperMode',
  components: {
    Swiper,
    SwiperSlide,
  },
  props: ['list'],
  data () {
    return {
      modules: [Navigation, Pagination]
    }
  }
}
</script>